
    {% extends './base.html' %}
    {% block title %}
        <title>{{page_title}}</title>
        <style>
  .product-ratings li.like-icon a.active {
    color: #0a6c5a!important;
  }
  .illustration-v4 .thumb-product-purchase a.active {
    color: #0a6c5a!important;

  }
</style>
    {% endblock %}

    {% block body %}
    <!--=== Slider ===-->
    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>
                

                <!-- SLIDE -->
                 {% for good in bannerGoods %}
                <li class="revolution-mch-1" data-transition="fade" data-slotamount="5" data-masterspeed="1000" data-title="{{good.name}}">
                    <!-- MAIN IMAGE -->
                    <img src="{{good.imgurl}}"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                    <div class="tp-caption revolution-ch3 sft start"
                        data-x="center"
                        data-hoffset="0"
                        data-y="140"
                        data-speed="1500"
                        data-start="500"
                        data-easing="Back.easeInOut"
                        data-endeasing="Power1.easeIn"                        
                        data-endspeed="300">
                        <!-- Latest <strong>Fashion</strong> Trends -->
                         {{good.name}}
                    </div>

                    <!-- LAYER -->
                    <div class="tp-caption revolution-ch4 sft"
                        data-x="center"
                        data-hoffset="-14"
                        data-y="210"
                        data-speed="1400"
                        data-start="2000"
                        data-easing="Power4.easeOut"
                        data-endspeed="300"
                        data-endeasing="Power1.easeIn"
                        data-captionhidden="off"
                        style="z-index: 6">
                        <!-- Cras non dui et quam auctor pretium.<br> -->
                        <!-- Aenean enim tortr, tempus et iteus m -->
                         {{good.title}}
                    </div>

                    <!-- LAYER -->
                    <div class="tp-caption sft"
                        data-x="center"
                        data-hoffset="0"
                        data-y="300"
                        data-speed="1600"
                        data-start="1800"
                        data-easing="Power4.easeOut"
                        data-endspeed="300"
                        data-endeasing="Power1.easeIn"
                        data-captionhidden="off"
                        style="z-index: 6">
                        <a href="/shop/goods/{{good.goodsID}}" class="btn-u btn-brd btn-brd-hover btn-u-light">查看詳情</a>
                    </div>
                </li>
                {% endfor %}
                <!-- END SLIDE -->

            </ul>
            <div class="tp-bannertimer tp-bottom"></div>            
        </div>
    </div>
    <!--=== End Slider ===-->

    <!--=== Product Content ===-->
    <div class="container content-md">
        <!--=== Illustration v1 ===-->
        <div class="row margin-bottom-60">
            <div class="col-md-6 md-margin-bottom-30">
                <div class="overflow-h">
                    <div class="illustration-v1 illustration-img1">
                        <div class="illustration-bg">
                            <div class="illustration-ads ad-details-v1">
                                <h3>夏季促銷 <strong>折扣</strong> 30% - 60% <strong></strong></h3>
                                <a class="btn-u btn-brd btn-brd-hover btn-u-light" href="/shop/goods">購物去</a>
                            </div>    
                        </div>    
                    </div>
                </div>    
            </div>
            <div class="col-md-6">
                <div class="overflow-h">
                    <a class="illustration-v1 illustration-img2" href="/shop/goods">
                        <span class="illustration-bg">
                            <span class="illustration-ads ad-details-v2">
                                <span class="item-time">新品發佈</span>
                                <span class="item-name" >去欣賞</sp>
                            </span>
                        </span>
                    </a>
                </div>    
            </div>
        </div><!--/end row-->
        <!--=== End Illustration v1 ===-->

        <div class="heading heading-v1 margin-bottom-20">
            <h2>精選推薦</h2>
            <p>店主精心挑選的女裝</p>
        </div>

        <!--=== Illustration v2 ===-->
        <div class="illustration-v2 margin-bottom-60">
            <div class="customNavigation margin-bottom-25">
                <a class="owl-btn prev rounded-x"><i class="fa fa-angle-left"></i></a>
                <a class="owl-btn next rounded-x"><i class="fa fa-angle-right"></i></a>
            </div>

            <ul class="list-inline owl-slider sec-recommended">
                 {% for good in bannerGoods %}
                <li class="item">
                    <div class="product-img">
                        <a href="/shop/goods/{{good.goodsID}}"><img class="full-width img-responsive" src="{{good.imgurl}}" alt="{{good.title}}"></a>
                        <a class="product-review" href="/shop/goods/{{good.goodsID}}">查看</a>
                        <a class="add-to-cart add-to-cart-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}" href="#" ><i class="fa fa-shopping-cart "></i>加入購物車</a>
                    </div>
                    <div class="product-description product-description-brd">
                        <div class="overflow-h margin-bottom-5">
                            <div class="pull-left">
                                <h4 class="title-price w-per-100 o-h white-1"><a href="/shop/goods/{{good.goodsID}}">{{good.title}}</a></h4>
                                <!-- <span class="gender text-uppercase">Men</span> -->
                                <!-- <span class="gender">Suits - Blazers</span> -->
                            </div>    
                            
                        </div>    
                        <ul class="list-inline product-ratings">
                            <li class="">
                                <span class="title- c-red">NTD${{good.price}}</span>
                            </li>
                            <!-- <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating-selected fa fa-star"></i></li>
                            <li><i class="rating fa fa-star"></i></li>
                            <li><i class="rating fa fa-star"></i></li> -->
                            <li class="like-icon"><a  data-toggle="tooltip" data-placement="left" data-id="{{good.goodsID}}" class="tooltips collect-btn" href="#"><i class="fa fa-heart"></i><span>收藏</span></a></li>
                        </ul>    
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div> 
        <!--=== End Illustration v2 ===-->

        <!--=== Illustration v3 ===-->
        <!-- <div class="row margin-bottom-50">
            <div class="col-md-4 md-margin-bottom-30">
                <div class="overflow-h">
                    <a class="illustration-v3 illustration-img1" href="#">
                        <span class="illustration-bg">
                            <span class="illustration-ads">
                                <span class="illustration-v3-category">
                                    <span class="product-category">Men</span>
                                    <span class="product-amount">56 Items</span>
                                </span>    
                            </span>    
                        </span>    
                    </a>
                </div>    
            </div>
            <div class="col-md-4 md-margin-bottom-30">
                <div class="overflow-h">
                    <a class="illustration-v3 illustration-img2" href="#">
                        <span class="illustration-bg">
                            <span class="illustration-ads">
                                <span class="illustration-v3-category">
                                    <span class="product-category">Women</span>
                                    <span class="product-amount">56 Items</span>
                                </span>    
                            </span>    
                        </span>    
                    </a>
                </div>    
            </div>
            <div class="col-md-4">
                <div class="overflow-h">
                    <a class="illustration-v3 illustration-img3" href="#">
                        <span class="illustration-bg">
                            <span class="illustration-ads">
                                <span class="illustration-v3-category">
                                    <span class="product-category">Children</span>
                                    <span class="product-amount">56 Items</span>
                                </span>    
                            </span>    
                        </span>    
                    </a>
                </div>    
            </div>
        </div> -->
        <!--=== End Illustration v3 ===-->

        <div class="heading heading-v1 margin-bottom-40">
            <h2>新品上架</h2>
        </div>

        <!--=== Illustration v2 ===-->
        <div class="row illustration-v2">
            {% for good in bannerGoods %}
            <div class="col-md-3 col-sm-6 md-margin-bottom-30">
                <div class="product-img">
                    <a href="/shop/goods/{{good.goodsID}}"><img class="full-width img-responsive" src="{{good.imgurl}}" alt=""></a>
                    <a class="product-review" href="/shop/goods/{{good.goodsID}}">查看詳情</a>
                    <a class="add-to-cart add-to-cart-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}" href="#"><i class="fa fa-shopping-cart"></i>加入購物車</a>
                </div>
                <div class="product-description product-description-brd">
                    <div class="overflow-h margin-bottom-5">
                        <div class="pull-left">
                            <h4 class="title-price w-per-100 white-1 o-h"><a href="/shop/goods/{{good.goodsID}}">{{good.name}}</a></h4>
                            <!-- <span class="gender text-uppercase">Woman</span>
                            <span class="gender">Suits - Blazers</span> -->
                        </div>    
                        
                    </div>    
                    <ul class="list-inline product-ratings">
                        <li class="product-">
                            <span class="title- c-red">NTD${{good.price}}</span>
                        </li>
                        <!-- <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating-selected fa fa-star"></i></li>
                        <li><i class="rating fa fa-star"></i></li>
                        <li><i class="rating fa fa-star"></i></li> -->
                        <li class="like-icon"><a data-id="{{good.goodsID}}" data-placement="left" class="tooltips collect-btn" href="#"><i class="fa fa-heart"></i><span>收藏</span></a></li>
                    </ul>    
                </div>
            </div>
            {% endfor %}
        </div> 
        <!--=== End Illustration v2 ===-->
    </div>
    <!--=== End Product Content ===-->

    <!--=== Twitter-Block ===-->
    <div class="parallaxBg twitter-block margin-bottom-60">
        <div class="container">
            <div class="heading heading-v1 margin-bottom-20">
                <h2>公告消息</h2>
            </div>

            <div id="carousel-example-generic-v5" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li class="active rounded-x" data-target="#carousel-example-generic-v5" data-slide-to="0"></li>
                    <li class="rounded-x" data-target="#carousel-example-generic-v5" data-slide-to="1"></li>
                    <li class="rounded-x" data-target="#carousel-example-generic-v5" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active h-50">
                        <p>即將進行618大促活動，屆時所有商品8折出售！<p>
                        <!-- <p><a href="https://twitter.com/htmlstream">@htmlstream</a></p>
                        <ul class="list-inline twitter-icons">
                            <li><a href="#"><i class="fa fa-reply"></i></a></li>
                            <li><a href="#"><i class="fa fa-retweet"></i></a></li>
                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                        </ul> -->
                    </div>
                    <div class="item h-50">
                        <p>WBIOKR商城已經達成10000位會員，每天都會有新品推出，每天都會有限時折扣商品上架，請時刻關注！<p>
                        <!-- <p><a href="https://twitter.com/htmlstream">@htmlstream</a></p>
                        <ul class="list-inline twitter-icons">
                            <li><a href="#"><i class="fa fa-reply"></i></a></li>
                            <li><a href="#"><i class="fa fa-retweet"></i></a></li>
                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                        </ul> -->
                    </div>
                    <!-- <div class="item">
                        <p>the majority have suffered #alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum</p>
                        <p><a href="https://twitter.com/htmlstream">@twbootstrap</a></p>
                        <ul class="list-inline twitter-icons">
                            <li><a href="#"><i class="fa fa-reply"></i></a></li>
                            <li><a href="#"><i class="fa fa-retweet"></i></a></li>
                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                        </ul>
                    </div>
                    <div class="item">
                        <p>New 100% Free Stock Photos. Every. Single. Day. Everything you need for your creative projects. <a href="#">http://publicdomainarchive.com</a></p>
                        <p><a href="https://twitter.com/htmlstream">@wrapbootstrap</a></p>
                        <ul class="list-inline twitter-icons">
                            <li><a href="#"><i class="fa fa-reply"></i></a></li>
                            <li><a href="#"><i class="fa fa-retweet"></i></a></li>
                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                        </ul>
                    </div> -->
                </div>
                
                <div class="carousel-arrow">
                    <a class="left carousel-control" href="#carousel-example-generic-v5" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic-v5" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
            </div>                        
        </div>    
    </div>
    <!--=== End Twitter-Block ===-->

    <div class="container">
        <!--=== Product Service ===-->
        <div class="row margin-bottom-60">
            <div class="col-md-4 product-service md-margin-bottom-30">
                <div class="product-service-heading">
                    <i class="fa fa-truck"></i>
                </div>
                <div class="product-service-in">
                    <h3>免運費</h3>
                    <p>商城內所有商品都是免運費</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
            <div class="col-md-4 product-service md-margin-bottom-30">
                <div class="product-service-heading">
                    <i class="icon-earphones-alt"></i>
                </div>
                <div class="product-service-in">
                    <h3>客戶服務</h3>
                    <p>在這裡，您可以享受等同於線下商城的尊貴服務</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
            <div class="col-md-4 product-service">
                <div class="product-service-heading">
                    <i class="icon-refresh"></i>
                </div>
                <div class="product-service-in">
                    <h3>售後</h3>
                    <p>所有商品收貨7天內無理由退貨</p>
                    <!-- <a href="#">+Read More</a> -->
                </div>
            </div>
        </div><!--/end row-->
        <!--=== End Product Service ===-->
        
        <!--=== Illustration v4 ===-->
        <div class="row illustration-v4 margin-bottom-40">
            <div class="col-md-4">
                <div class="heading heading-v1 margin-bottom-20">
                    <h2>熱銷榜</h2>
                </div>
                {% for good in hotGoods.slice(0, 3) %}
                <div class="thumb-product">
                    <img class="thumb-product-img" src="{{good.imgurl}}" alt="{{good.title}}">
                    <div class="thumb-product-in">
                        <h4 class="white-1 o-h"><a href="/shop/goods/{{good.goodsID}}">{{good.name}}</a></h4>
                        <span class="thumb-product-type white-1 o-h">{{good.title}}</span>
                    </div>
                    <ul class="list-inline overflow-h">
                        <li class="thumb-product-price line-through">NTD${{good.priceMarket}}</li>
                        <li class="thumb-product-price">NTD${{good.price}}</li>
                        <li class="thumb-product-purchase"><a href="#" class="add-to-cart-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-shopping-cart"></i></a> | <a href="#" class="collect-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-heart"></i></a></li>
                    </ul>    
                </div>
                {% endfor %}
            </div>
            <div class="col-md-4">
                <div class="heading heading-v1 margin-bottom-20">
                    <h2>新品榜</h2>
                </div>
                {% for good in newGoods.slice(0, 3) %}
                <div class="thumb-product">
                    <img class="thumb-product-img" src="{{good.imgurl}}" alt="{{good.title}}">
                    <div class="thumb-product-in">
                        <h4 class="white-1 o-h"><a href="/shop/goods/{{good.goodsID}}">{{good.name}}</a></h4>
                        <span class="thumb-product-type white-1 o-h">{{good.title}}</span>
                    </div>
                    <ul class="list-inline overflow-h">
                        <li class="thumb-product-price line-through">NTD${{good.priceMarket}}</li>
                        <li class="thumb-product-price">NTD${{good.price}}</li>
                        <li class="thumb-product-purchase"><a href="#" class="add-to-cart-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-shopping-cart"></i></a> | <a href="#" class="collect-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-heart"></i></a></li>
                    </ul>    
                </div>
                {% endfor %}
            </div>
            <div class="col-md-4">
                <div class="heading heading-v1 margin-bottom-20">
                    <h2>推薦榜</h2>
                </div>
                {% for good in shopRecommendGoods.slice(0, 3) %}
                <div class="thumb-product">
                    <img class="thumb-product-img" src="{{good.imgurl}}" alt="{{good.title}}">
                    <div class="thumb-product-in">
                        <h4 class="white-1 o-h"><a href="/shop/goods/{{good.goodsID}}">{{good.name}}</a></h4>
                        <span class="thumb-product-type white-1 o-h">{{good.title}}</span>
                    </div>
                    <ul class="list-inline overflow-h">
                        <li class="thumb-product-price line-through">NTD${{good.priceMarket}}</li>
                        <li class="thumb-product-price">NTD${{good.price}}</li>
                        <li class="thumb-product-purchase"><a href="#" class="add-to-cart-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-shopping-cart"></i></a> | <a href="#" class="collect-btn" data-id="{{good.goodsID}}" data-price="{{good.price}}"><i class="fa fa-heart"></i></a></li>
                    </ul>    
                </div>
                {% endfor %}
            </div>
        </div><!--/end row-->
        <!--=== End Illustration v4 ===-->
    </div><!--/end cotnainer-->

    <!--=== Collection Banner ===-->
    <!-- <div class="collection-banner">
        <div class="container">
            <div class="col-md-7 md-margin-bottom-50">
                <h2>Makeup collection</h2>
                <p>Duis in posuere risus. Vivamus sed dignissim tellus. In vehicula justo tempor commodo. <br> Nunc lobortis dapibus neque quis lacinia</p><br>
                <a href="#" class="btn-u btn-brd btn-brd-hover btn-u-light">Shop Now</a>
            </div>
            <div class="col-md-5">
                <div class="overflow-h">
                    <span class="percent-numb">50</span>
                    <div class="percent-off">
                        <span class="discount-percent">%</span>
                        <span class="discount-off">off</span>
                    </div>
                    <div class="new-offers shop-bg-green rounded-x">
                        <p>new</p>
                        <span>Products</span>
                    </div>    
                </div>    
            </div>
        </div>
    </div> -->
    <!--=== End Collection Banner ===-->

    <!--=== Sponsors ===-->
    <div class="container content">
        <div class="heading heading-v1 margin-bottom-40">
            <h2>品牌入駐</h2>
            <p>我們已經上架全球各地多個品牌廠商的產品</p>
        </div>

        <ul class="list-inline owl-slider-v2">
            <li class="item first-child">
                <img src="/public/assets/new/img/clients/07.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/08.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/10.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/11.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/09.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/12.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/07.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/08.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/09.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/10.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/11.png" alt="">
            </li>
            <li class="item">
                <img src="/public/assets/new/img/clients/12.png" alt="">
            </li>
        </ul><!--/end owl-carousel-->
    </div>
    <!--=== End Sponsors ===-->

    <!--=== Shop Suvbscribe ===-->
    <!-- <div class="shop-subscribe">
        <div class="container">
            <div class="row">
                <div class="col-md-8 md-margin-bottom-20">
                    <h2>subscribe to our weekly <strong>newsletter</strong></h2>
                </div>  
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Email your email...">
                        <span class="input-group-btn">
                            <button class="btn" type="button"><i class="fa fa-envelope-o"></i></button>
                        </span>
                    </div>    
                </div>
            </div>
        </div>
    </div> -->
    <!--=== End Shop Suvbscribe ===-->

    


<script>
    jQuery(document).ready(function() {
        App.init();
        App.initParallaxBg();
        OwlCarousel.initOwlCarousel();
        RevolutionSlider.initRSfullWidth();
        StyleSwitcher.initStyleSwitcher();    
        
        $(document).on('click', '.add-to-cart-btn', function() {
          var id = $(this).attr('data-id')
          var price = $(this).attr('data-price')
          // console.log(1212, id, this)
          addCart(id, 1, price)
          window.event.preventDefault()
        })

        $(document).on('click', '.collect-btn', function() {
          var id = $(this).attr('data-id')
          var price = $(this).attr('data-price')
          window.event.preventDefault()
          // console.log(1212, id, this)
          if ($(this).hasClass('active')) {
            const collectInfo = collectGoods.find(o => o.goodsID == id)
            // console.log(id, collectInfo, collectGoods)
            if (!collectInfo) {
              Ap.msg.error('操作失敗')
              return
            }
            delWishList(collectInfo.id)
          } else {
            addWishList(id)
          }
        })
});

window.wishQueryCb = function(res) { 
      const wishList = res.rows.map(o => String(o.goodsID))
      $('.collect-btn').each(function() {
        var id = $(this).attr('data-id')
        if (wishList.indexOf(id) > -1) {
          $(this).addClass('active')
        } else {
          $(this).removeClass('active')
        }
        $(this).find('span').text(wishList.includes(id) ? '已收藏' : '收藏')
      })
    }
</script>
<!--[if lt IE 9]>
    <script src="/public/assets/new/plugins/respond.js"></script>
    <script src="/public/assets/new/plugins/html5shiv.js"></script>
    <script src="/public/assets/new/js/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->

{% endblock %}